<!DOCTYPE html>

<head>
<script src="sortmodels.js"></script>
<script src="sortviewers.js"></script>
<script src="animationbase.js"></script>


<html>
<body onload="">

<canvas id="ancan" width="400" height="400" style="border:4px solid blue"></canvas>
<br />
<button onclick="init1()">BubbleSort with BarView</button><button onclick="init2()">BubbleSort with ScatterView</button>
<button onclick="init3()">BubbleSort with BoxView</button><br/>
<button onclick="init4()">SelectionSort with BarView</button><button onclick="init5()">SelectionSort with ScatterView</button>
<button onclick="init6()">SelectionSort with BoxView</button><br/>
<button onclick="init7()">InsertionSort with BarView</button><button onclick="init8()">InsertionSort with ScatterView</button>
<button onclick="init9()">InsertionSort with BoxView</button><br/>
<button onclick="init10()">ShellSort with BarView</button><button onclick="init11()">ShellSort with ScatterView</button>
<button onclick="init12()">ShellSort with BoxView</button><br/>
<button onclick="init13()">MergeSort with BarView</button><button onclick="init14()">MergeSort with ScatterView</button>
<button onclick="init15()">MergeSort with BoxView</button><br/>
<button onclick="init16()">QuickSort with BarView</button><button onclick="init17()">QuickSort with ScatterView</button>
<button onclick="init18()">QuickSort with BoxView</button><br/>
<button onclick="a.run()">Run</button>
<button onclick="a.stop()">Stop</button> </br>
<button onclick="a.begin()">Beginning</button>
<button onclick="a.forward()">Step Forward</button>
<button onclick="a.backward()">Step Backward</button>
<button onclick="a.end()">End</button>


</body>
</html>